<template>
    <el-dialog class="elDialog" :title="wintitle" :visible.sync="isShow" width="84%" :lock-scroll="true" :close-on-click-modal="false">
        <div class="dialog">
            <zy-table :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage"></zy-table>
        </div>
    </el-dialog>
</template>

<script>
import { column_1 } from './formConfig.js'
import zyTable from '@/components/common/zyTable.vue'
import { requestApi } from '@/requset/api'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            wintitle: '',
            isShow: false,
            tableData: [],
            page: 1,
            pagination: {
                pageSize: null,
            },
            tableColumn: null,
            device_id: null,
            isShow1: false,
            arr: [],
        }
    },
    components: { zyTable },
    computed: {
        ...mapState('backstage', ['sys_eig']),
    },
    methods: {
        doOpen(e, see = true) {
            column_1[column_1.length - 1].buttons[0].if = (val) => see
            let { device_id } = e
            this.device_id = device_id
            this.isShow = true
            this.page = 1
            this.search()
        },
        getList(obj) {
            obj.page = this.page
            requestApi('post', 'warn/details/list', obj, true).then((res) => {
                let list = res.data.data
                if (res.data.code == 0 && list.length != 0) {
                    this.tableData = res.data.data

                    this.tableData.forEach((e) => {
                        let arr = e.content.split('|')
                        let nickname = arr[arr.length - 1]
                        if (nickname.includes('acc_wave')) {
                            e.source = e.title
                            e.content1 = arr[2]
                            e.threshold = `${e.pred_data}/${e.standard_data}`
                        } else {
                            this.sys_eig.find((e) => nickname.includes(e.nickname)).name
                            let a = {
                                Z: '垂直',
                                X: '轴向',
                                Y: '水平',
                            }
                            let sys_eig = this.sys_eig.find((e) => nickname.includes(e.nickname))
                            e.source = nickname.includes('tem') ? '温度告警' : '振动告警'
                            e.content1 = arr.length === 4 ? arr[2] : `${['X', 'Y', 'Z'].includes(nickname.split('_')[0]) ? a[nickname.split('_')[0]] : ''}${arr[3]}`
                            e.threshold = `${e.pred_data}/${e.standard_data} ${e.title === '固定阈值' || e.title === '动态阈值' ? `(${sys_eig.unit})` : e.title === '趋势预测' ? '(斜率)' : ''}`
                        }
                    })

                    this.pagination = res.data.pagination
                } else {
                    if (list.length == 0) {
                        this.tableData = []
                        this.pagination = {}
                        return
                    }
                    this.$message({
                        type: 'info',
                        message: '网络异常或暂无数据,请稍后重试',
                    })
                }
            })
        },
        search() {
            this.getList({ device_id: this.device_id, page: this.page })
        },
        handle1(val) {
            this.isShow = false
            let { content } = val
            let name = ''
            name = this.getFeatureKey(content)
            this.$router.push(`/index/expdig/diagnosis?device_id=${val.device_id}&time=${val.pred_time}&sensor_id=${val.sensor_id}&key=${name}`)
        },
        getStringBetween(str, start, end) {
            let startIndex = str.indexOf(start)
            if (startIndex === -1) return ''
            startIndex += start.length
            let endIndex = str.indexOf(end, startIndex)
            if (endIndex === -1) return ''
            return str.substring(startIndex, endIndex)
        },
        getFeatureKey(str) {
            var lastIndex = str.lastIndexOf('|')
            if (lastIndex !== -1) {
                return str.substring(lastIndex + 1)
            } else {
                return ''
            }
        },
        changePage(e) {
            this.page = e
            this.search()
        },
        handleDelete(val) {
            let id = val.id
            this.$confirm('确认删除此条告警?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.warnDelete(id)
                    this.$emit('indexSearch')
                    this.search()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        //删除告警
        warnDelete(id) {
            requestApi('get', 'warn/delete?id=' + id, null, true).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '成功删除' + res.data.data.Affected_rows + '条告警',
                    })
                    this.search()
                } else {
                    this.$message({
                        type: 'info',
                        message: '删除失败',
                    })
                }
            })
        },
    },
    created() {
        this.tableColumn = column_1
        column_1[column_1.length - 1].buttons = [
            {
                text: '查看',
                click: (val) => this.handle1(val),
                icon: 'el-icon-s-comment',
            },
            // {
            //     text: '原因及建议',
            //     click: (val) => this.handle2(val),
            //     icon: 'el-icon-question',
            // },
            // {
            //     text: '已发通知',
            //     click: (val) => {
            //         this.$router.push(`/index/backmang/message?content=${encodeURIComponent(val.content)}`)
            //     },
            //     icon: 'el-icon-message',
            // },
            {
                text: '删除',
                click: (val) => this.handleDelete(val),
                icon: 'el-icon-delete',
            },
        ]
    },
}
</script>

<style lang="less" scoped>
.elDialog {
    .dialog {
        width: 98%;
        height: 60vh;
    }
}
.track {
    width: 100px;

    margin-left: 10%;
    height: 200px;
    display: flex;
    flex-direction: column;
    z-index: 99;
    .item {
        margin-bottom: 40px;

        .label {
            font-size: 16px;
            color: rgb(181, 215, 246);
            font-weight: bold;
            margin-bottom: 10px;
        }
    }
}
</style>
